<template>
    <PageView>
        <a-card title="列表">
            <a-row :gutter="10" class="inputGroup">
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-input v-model="searchData.username" placeholder="请输入账号" @keyup.enter="getListTwo"/>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-button-group>
                        <a-button type="primary" :loading="loading" @click="getListTwo">确定筛选</a-button>
                    </a-button-group>
                </a-col>
            </a-row>
            <a-table
                :loading="loading"
                :columns="columns"
                :dataSource="data"
                :pagination="{total,pageSize,showSizeChanger,current}"
                @change="changePagination"
                bordered :scroll="{x:true}">
            </a-table>
            <a-button type="primary" @click="exportExcel" style="float: right">导出表格</a-button>
        </a-card>
    </PageView>
</template>

<script type="text/jsx">
    import Member from '../../api/Member'
    import { static_level, level } from '../../utils/status'
    export default {
        name: 'pingtai',
        data () {
            return {
                loading: true,
                columns: [
                    {
                        title: '账号',
                        dataIndex: 'phone',
                        customRender: (v) => <a>{v}</a>
                    },
                    {
                        title: '邮箱',
                        dataIndex: 'email',
                        customRender: (v) => {
                            return v || '暂无'
                        }
                    },
                    {
                        title: '邀请码',
                        dataIndex: 'invit_code'
                    },
                    {
                        title: '等级',
                        dataIndex: 'level',
                        customRender: (v) => level[v]
                    },
                    {
                        title: '状态',
                        dataIndex: 'status',
                        customRender: (v) => {
                            let status = {
                                0: { name: '正常', color: 'success' },
                                '-1': { name: '冻结', color: 'error' }
                            }
                            return <a-badge status={status[v].color} text={status[v].name}/>
                        }
                    },
                    {
                        title: '是否投资',
                        dataIndex: 'first_guadan',
                        customRender: (v) => {
                            let status = {
                                1: { name: '已投资', color: 'success' },
                                0: { name: '未投资', color: 'error' }
                            }
                            return <a-badge status={status[v].color} text={status[v].name}/>
                        }
                    },
                    {
                        title: '静态等级',
                        dataIndex: 'static_level',
                        customRender: (v) => {

                            return (
                                <div style="display:flex;align-items: center">
                                    <img style="display:inline-block;height:20px;margin-right:10px" src={require(`../../assets/level${v}.png`)}/>
                                    <span>{static_level[v]}</span>
                                </div>
                            )
                        }
                    },
                    {
                        title: '动态等级',
                        dataIndex: 'namic_level',
                        customRender: (v) => {
                            let arr = []
                            for (let i = 0; i < Number(v); i++) {
                                this.$set(arr, i, <a-icon type="star"/>)
                            }
                            return <a>{arr}</a>
                        }
                    },
                    {
                        title: '注册时间',
                        dataIndex: 'add_time',
                        customRender: (v) => {
                            return this.timeOne(v)
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 110,
                        customRender: (v) => {
                            return (
                                <a-dropdown>
                                    <a-menu slot="overlay">
                                        <a-menu-item onClick={() => {
                                            this.del(v.uid)
                                        }}>删除
                                        </a-menu-item>
                                    </a-menu>
                                    <a-button>操作 <a-icon type="down"/></a-button>
                                </a-dropdown>
                            )
                        }
                    }
                ],
                data: [],
                total: 0,
                pageSize: 10,
                current: 1,
                showSizeChanger: true,
                searchData: {
                    username: '',
                },
            }
        },
        activated () {
            this.getList()
        },
        methods: {
            getListTwo () {
                this.current = 1
                this.getList()
            },
            getList () {
                this.loading = true
                Member.gameMemberList({
                    page: this.current,
                    num: this.pageSize,
                    ...this.searchData
                }).then(res => {
                    this.data = res.data.map((value, key) => {
                        return { ...value, key }
                    })
                    this.loading = false
                    this.total = parseInt(res.count)
                })
            },
            changePagination (pagination) {
                Object.keys(pagination).forEach(val => {
                    this[val] = pagination[val]
                })
                this.getList()
            },
            del (uid) {
                this.$confirm({
                    title: `删除`,
                    content: `确定删除此账号吗?`,
                    centered: true,
                    onOk: () => {
                        return new Promise((resolve, reject) => {
                            Member.delGameMember({ uid }).then(res => {
                                resolve()
                                this.getList()
                            }).catch(res => {
                                reject()
                            })
                        })
                    }
                })
            },
            //导出的方法
            exportExcel() {
                require.ensure([], () => {
                    const { export_json_to_excel } = require('../../excel/Export2Excel');
                    const tHeader = this.columns.map(v=>v.title);
                    const filterVal = this.columns.map(v=>v.dataIndex);
                    const list = JSON.parse(JSON.stringify(this.data)).map(v=>{
                        v.tongji = `体验会员:${v.count}`+" "+`总排单金额:${v.order_money||0}`
                        v.level = level[v.level]
                        v.status = v.status==="0"?"正常":"冻结"
                        v.first_guadan = v.first_guadan==="0"?"未投资":"已投资"
                        v.static_level = static_level[v.static_level]
                        v.namic_level = `${v.namic_level}星`
                        v.add_time = this.timeOne(v.add_time)
                        return v
                    });
                    const data = this.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, '平台账号');
                })
            },

            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            }
        }
    }
</script>

<style scoped lang="less">
    .inputGroup {
        > div {
            margin-bottom: 20px;
        }
    }
</style>